﻿<script>
    require('js/store')
    module.exports = {
       
        data:function (){
            return {
                curPage: 1,
                cur:'',
           }
        },

        computed: {
            'allpages': function() {
                // 总条目
                var allItmes = this.counts;

                var pages =  Math.ceil(allItmes / store.per_page_count);

                return  pages === 0 ? 1 : pages;
            },


        },

        props: ['counts'],

        methods: {
            // 前一页
            prePage: function() {
             
                if (this.curPage === 1 || !(this.curPage > 0 && this.curPage <= this.allpages)) return;
                this.curPage--;
                this.blur_search(this.curPage);

            },

            // 下一页
            nextPage: function() {
             
                if (this.curPage >= this.allpages || this.curPage <= 0) return;
                this.curPage++;
                this.blur_search(this.curPage);
            },

            chilFn:function(value){

                this.curPage = value
            },

            blur_search:function(value){
                // 对于页码 做检测
                if ( parseInt(value) > 0 && parseInt(value) <= this.allpages) {
                    this.$parent.$emit('turn-page',  value);
                }
            }
        }
    }
</script>


<template>
    <div class="turn-page f-fr">
          <i class='f-fl arr-left' @click="prePage"></i>

          <input type='text'  id='txt' class='f-fl' v-model="curPage" @blur='blur_search(curPage)'>

          <span class='f-fl'>/{{allpages}}</span>

          <i class='f-fl arr-right' @click="nextPage"></i>

    </div>
</template>



<style lang="scss"  scoped>
    .turn-page{
        position:relative;
        height: 30px;
        width: 150px;
        padding:20px 0;
        font-size: 16px;
        .arr-left{  
            margin-right: 6px;
            background: url('./img/m-left-arrow.png') no-repeat center center;
            width: 30px;
            height: 30px;
            display: block;
        }
        #txt{
            display: block;
            width:26px;
            height:28px;
            line-height:30px;
            margin-right: 5px;
            background: #FFFFFF;
            border: 1px solid #D2DAE1;
            border-radius: 2px;
            text-align: center;
             
        }
        span{
            width:30px;
            display: block;
            line-height: 30px;
            height:30px;
        }
        .arr-right{  
            background: url('./img/m-right-arrow.png') no-repeat center center;
            width: 30px;
            height: 30px;
            display: block;
            margin-left: 6px;
        }
    }
</style>
     